<template>
  <div class="drug-details">
    <div class="details-head">
      <!-- 入库方式 -->
      <el-select
        placeholder="入库方式"
        class="details-from"
        v-model="query.type"
        @change="onQuery"
        clearable
      >
        <template v-for="item in wareHousingTypes">
          <el-option 
            :key="item.id" 
            :label="item.text" 
            :value="item.id">
          </el-option>
        </template>
      </el-select>
      <!-- 供应商 -->
      <el-select 
        v-model="query.supplierId"
        class="details-from"
        placeholder="供应商"
        @change="onQuery"
      >
        <template v-for="item in suppliers">
          <el-option 
            :key="item.id" 
            :label="item.text" 
            :value="item.id">
          </el-option>
        </template>
      </el-select>
      <!-- 入库时间 -->
      <span>入库时间：</span>
      <el-date-picker
        class="details-from datetime"
        v-model="wareHousingDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="onQuery"
      >
      </el-date-picker>
      <el-button class="details-button" type="primary" @click="onQuery">搜索</el-button>
      <el-button @click="onRestQuery">清空</el-button>
    </div>
    <div class="details-button">
      <el-button
        :loading="submitLoading"
        class="details-button"
        @click="onExport"
        type="primary"
        plain
      >导出
      </el-button>
    </div>
    <div class="tables">
      <el-table :data="data" v-loading="loading" height="100%">
        <el-table-column prop="drugName" label="商品名称"></el-table-column>
        <el-table-column prop="warehousingTime" label="入库日期">
          <template slot-scope="scope">{{ _formatTime(scope.row.warehousingTime) }}</template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商"></el-table-column>
        <el-table-column prop="costPrice" label="进货价"/>
        <el-table-column prop="actualQuantity" label="入库数量">
          <template slot-scope="scope">
            {{scope.row.actualQuantity + scope.row.coefficientName}}
          </template>
        </el-table-column>
        <el-table-column prop="wareHousingType" label="入库方式">
          <template slot-scope="scope">
            <housingType :wareHousingType="scope.row.wareHousingType"/>
          </template>
        </el-table-column>
        <el-table-column prop="batchNo" label="批号"></el-table-column>
        <template v-if="dType == 3 || dType == 4">
          <el-table-column label="有效期" prop="termOfValidity" width="180" sortable="custom" />
        </template>
        <el-table-column prop="leftCount" label="剩余数量">
          <template slot-scope="scope">
            <template v-if="scope.row.minLeftCount > 0">
              {{scope.row.leftCount + scope.row.packageUnit + scope.row.minLeftCount + scope.row.doseUnit}}
            </template>
            <template v-else>{{scope.row.leftCount + scope.row.packageUnit}}</template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="sizes"
        :page-size="size"
        :total="total">
      </el-pagination>
    </div> 
  </div>
</template>

<script>
import { getSuppliers } from "@/api/storageRoom/drugWareHousing";
import { getDetails, updateDrugDetail, outDetails } from '@/api/storageRoom/drug';
import housingType from '../../drugWareHousing/module/housingType';
import columnClickEdit from '@/components/ColumnClickEdit';
import { formatMoney, parseTime } from "@/utils/index";
import termOfValidity from './termOfValidity';
import { mapGetters } from 'vuex';

export default {
  name: "batchDetail",
  inheritAttrs: false,
  props: {
    id: {
      type: String | Number,
      default: null
    }
  },
  components: { 
    housingType,
    columnClickEdit,
    termOfValidity
  },
  data() {
    return {
      query: {
        supplierId: null,
        startDate: null,
        endDate: null,
        type: null,
        id: null
      },
      wareHousingDate: null,
      submitLoading: false,
      loading: false,
      suppliers: [],
      dType: null,
      total: 400,
      current: 1,
      size: 10,
      data: [],
    }
  },
  computed: {
    ...mapGetters(["wareHousingTypes", "sizes"]),
  },
  created() {
    getSuppliers().then(res => {
      res.content.forEach(item => {
        this.suppliers.push({
          id: item.id,
          text: item.supplierName
        });
      });
    });
  },
  mounted() {
    this.query.id = this.id;
    this.loadData(this.current, this.size);
  },
  methods: {
    formatMoney,
    onQuery() {
      this.current = 1;
      this.loadData(this.current, this.size);
    },
    onRestQuery() {
      this.query.supplierId = null;
      this.query.startDate = null;
      this.query.endDate = null;
      this.query.type = null;
      this.current = 1;
      this.onQuery();
    },
    loadData(page, size) {
      this.data.splice(0, this.data.length);
      let data = {
        ...this.query,
        page: page - 1,
        size
      };
      if(this.wareHousingDate && this.wareHousingDate) {
        data.startDate = this.wareHousingDate[0] + ' 00:00:00';
        data.endDate = this.wareHousingDate[1] + ' 23:59:59';
      }

      this.loading = true;
      getDetails(data).then(res => {
        this.loading = false;
        this.data = res.content;
        this.data.forEach(e => {
          this.dType = e.drugType;
        });
        this.total = res.totalElements;
      }).catch(() => {
        this.loading = false;
      });
    },
    update(id) {
      this.loadData(id, this.current, this.size);
    },
    handleSizeChange(size) {
      this.loadData(this.current, size);
    },
    handleCurrentChange(page) {
      this.loadData(page, this.size);
    },
    onChangePrice({row, value}) {
      let data = {
        batchNo: row.batchNo,
        costPrice: value,
        id: row.id,
        termOfValidity: row.termOfValidity
      }
      this._columnEdit(row, data);
    },
    onChangeNo({row, value}) {
      let data = {
        batchNo: value,
        costPrice: row.costPrice,
        id: row.id,
        termOfValidity: row.termOfValidity
      }
      this._columnEdit(row, data);
    },
    onChangeTerm({row, value}) {
      let data = {
        batchNo: row.batchNo,
        costPrice: row.costPrice,
        id: row.id,
        termOfValidity: value
      }
      this._columnEdit(row, data);
    },
    onExport() {
      let data = {
        ...this.query,
        page: this.current - 1,
        size: this.size
      };
      if(this.wareHousingDate && this.wareHousingDate) {
        data.startDate = this.wareHousingDate[0] + ' 00:00:00';
        data.endDate = this.wareHousingDate[1] + ' 23:59:59';
      }

      this.submitLoading = true;
      outDetails(data).then(() => {
        this.submitLoading = false;
      }).catch(() => {
        this.submitLoading = false;
      });
    },
    _columnEdit(row, data) {
      row.costPrice = data.costPrice;
      row.batchNo = data.batchNo;
      row.termOfValidity = data.termOfValidity;
      updateDrugDetail(data).then(() => {
        this.$notify({
          title: "保存成功",
          type: "success",
          duration: 2500
        });
      });
    },
    _formatTime(value) {
      return parseTime(value, "{y}-{m}-{d}");
    }
  }
}
</script>

<style lang="scss" scoped>
.drug-details {
  .tables {
    height: 400px;
    width: 100%;
  }

  .details-head {
    .details-from {
      margin-right: 10px;
      width: 120px;

      &.datetime {
        width: 245px;

        /deep/ .el-range-separator {
          width: 20px;
        }
      }
    }
    .details-button {
      margin-right: 5px;
    }
  }

  .details-table {
    margin-top: 10px;
    width: 100%;
  }

  .details-pagination {
    margin-top: 10px;
  }

  .details-button {
    margin-top: 10px;
  }
}
</style>

